<template>
  <el-main>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="楼盘名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入楼盘名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物业类型" prop="premisesType">
        <el-select v-model="queryParams.premisesType" placeholder="请选择物业类型" clearable size="small">
          <el-option
            v-for="dict in premisesTypes"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-select v-model="queryParams.province" placeholder="请选择省" size="small" @change="getRegion2(queryParams.province)">
          <el-option
            v-for="region in region1"
            :key="region.regionName"
            :label="region.regionName"
            :value="region.regionId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-select v-model="queryParams.city" placeholder="请选择市"  size="small" @change="getRegion3(queryParams.city)">
          <el-option
            v-for="region in region2"
            :key="region.regionName"
            :label="region.regionName"
            :value="region.regionId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区" prop="county">
        <el-select v-model="queryParams.county" placeholder="请选择区" clearable size="small">
          <el-option
            v-for="region in region3"
            :key="region.regionName"
            :label="region.regionName"
            :value="region.regionId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:info:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:info:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:info:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:info:export']"
        >导出</el-button>
      </el-col>
	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="社区ID" align="center" prop="id" />
      <el-table-column label="楼盘名称" align="center" prop="name" />
      <el-table-column label="地址" align="center" prop="address" />
      <el-table-column label="社区类型" align="center" prop="communityTypeLable" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:info:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:info:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改楼盘信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-button type="primary" @click="open2=true">添加相册</el-button>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--        <el-form-item label="纬度" prop="outsideId">-->
<!--          <el-input v-model="form.outsideId" placeholder="请输入纬度" />-->
<!--        </el-form-item>-->
        <el-form-item label="*楼盘名称" prop="name">
          <el-input v-model="form.name" placeholder="楼盘名称" />
        </el-form-item>
        <el-form-item label="*楼盘地址" prop="address">
          <el-input v-model="form.address" placeholder="楼盘地址" />
        </el-form-item>
        <el-form-item label="省" prop="province">
          <el-select v-model="form.province" placeholder="请选择省"  size="small" @change="getRegion2(form.province)" >
            <el-option
              v-for="region in region1"
              :key="region.regionName"
              :label="region.regionName"
              :value="region.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model="form.city" placeholder="请选择市"  size="small" @change="getRegion3(form.city)">
            <el-option
              v-for="region in region2"
              :key="region.regionName"
              :label="region.regionName"
              :value="region.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="county">
          <el-select v-model="form.county" placeholder="请选择区" clearable size="small" @change="getBusinessCircle">
            <el-option
              v-for="region in region3"
              :key="region.regionName"
              :label="region.regionName"
              :value="region.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商圈" prop="commercialArea">
          <el-checkbox-group v-model="businessCircleIds">
            <el-checkbox v-for="item in businessCircles" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="地铁" prop="subway">
          <el-checkbox-group v-model="subwayIds">
            <el-checkbox v-for="item in subways" :label="item.id">{{item.subway}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="建筑面积" prop="proportion">
          <el-input v-model="form.proportion" placeholder="请输入建筑面积" />平方米
        </el-form-item>
        <el-form-item label="建筑类型" prop="buildingType">
          <el-select v-model="form.buildingType" placeholder="请选择建筑类型">
            <el-option
              v-for="dict in buildingTypes"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="社区类型" prop="communityType">
          <el-select v-model="form.communityType" placeholder="请选择社区类型">
            <el-option
              v-for="dict in communityTypes"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物业类型" prop="premisesType">
          <el-select v-model="form.premisesType" placeholder="请选择物业类型">
            <el-option
              v-for="dict in premisesTypes"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼盘特色" prop="propertyIds">
          <el-checkbox-group v-model="propertyIds">
            <el-checkbox v-for="item in properties" :label="item.id">{{item.premisesProperty}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="容积率" prop="grossPlotRatio">
          <el-input v-model="form.grossPlotRatio" placeholder="请输入容积率" />平方米
        </el-form-item>
        <el-form-item label="绿化率" prop="greenCoverage">
          <el-input v-model="form.greenCoverage" placeholder="请输入绿化率" />%
        </el-form-item>
        <el-form-item label="楼栋数" prop="buildingCount">
          <el-input v-model="form.buildingCount" placeholder="请输入楼栋数" />栋
        </el-form-item>
        <el-form-item label="得房率" prop="efficiency">
          <el-input v-model="form.efficiency" placeholder="请输入得房率" />%
        </el-form-item>
        <el-form-item label="开发商" prop="developer">
          <el-input v-model="form.developer" placeholder="请输入开发商" />
        </el-form-item>
        <el-form-item label="物业管理公司" prop="estate">
          <el-input v-model="form.estate" placeholder="请输入物业管理公司" />
        </el-form-item>
        <el-form-item label="楼盘简介" prop="introduce">
          <el-input v-model="form.introduce" placeholder="请输入楼盘简介" />
        </el-form-item>

        <el-col :span="24">
          <el-form-item label="周边配套" prop="peripheralFacilities">
            <el-button type="primary" @click="addZhouBian">增加</el-button>
            <div v-for="(item,index) in peripheralFacilities">
              <el-row>
                <el-col :span="10">
                  <el-form-item  label="标题">
                    <el-input v-model="item.title" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="内容">
                    <el-input v-model="item.content" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" @click="delZhouBian(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="交通情况" prop="trafficCondition">
            <el-button type="primary" @click="addJiaoTong">增加</el-button>
            <div v-for="(item,index) in trafficCondition">
              <el-row>
                <el-col :span="10">
                  <el-form-item  label="标题">
                    <el-input v-model="item.title" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="内容">
                    <el-input v-model="item.content" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" @click="delJiaoTong(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-col>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加相册 -->
    <el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="户型图" prop="pic1">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            :before-upload="handleBeforeUploadVideo"
            :http-request="requestFile"
            :on-remove="removeFile"
            action="">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <img v-if="form.pic1" :src="form.pic1" height="100px" width="100px">
          <!-- 进度条 -->
          <el-progress  v-if="progressFlag" :percentage="loadProgress"></el-progress>
          <el-button id="myBtn" v-if="progressFlag" size="mini">{{buttonText}}</el-button>
        </el-form-item>
        <el-form-item label="外景图" prop="pic2">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            :before-upload="handleBeforeUploadVideo2"
            :http-request="requestFile2"
            :on-remove="removeFile2"
            action="">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <img v-if="form.pic2" :src="form.pic2" height="100px" width="100px">
          <!-- 进度条 -->
          <el-progress  v-if="progressFlag2" :percentage="loadProgress2"></el-progress>
          <el-button id="myBtn2" v-if="progressFlag2" size="mini">{{buttonText2}}</el-button>
        </el-form-item>
        <el-form-item label="施工图" prop="pic3">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            :before-upload="handleBeforeUploadVideo3"
            :http-request="requestFile3"
            :on-remove="removeFile3"
            action="">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <img v-if="form.pic3" :src="form.pic3" height="100px" width="100px">
          <!-- 进度条 -->
          <el-progress  v-if="progressFlag3" :percentage="loadProgress3"></el-progress>
          <el-button id="myBtn3" v-if="progressFlag3" size="mini">{{buttonText3}}</el-button>
        </el-form-item>
        <el-form-item label="效果图" prop="pic4">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            :before-upload="handleBeforeUploadVideo4"
            :http-request="requestFile4"
            :on-remove="removeFile4"
            action="">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <img v-if="form.pic4" :src="form.pic4" height="100px" width="100px">
          <!-- 进度条 -->
          <el-progress  v-if="progressFlag4" :percentage="loadProgress4"></el-progress>
          <el-button id="myBtn4" v-if="progressFlag4" size="mini">{{buttonText4}}</el-button>
        </el-form-item>
        <el-form-item label="首页图" prop="pic5">
          <el-upload
            class="upload-demo"
            drag
            :limit="1"
            :before-upload="handleBeforeUploadVideo5"
            :http-request="requestFile5"
            :on-remove="removeFile5"
            action="">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <img v-if="form.pic5" :src="form.pic5" height="100px" width="100px">
          <!-- 进度条 -->
          <el-progress  v-if="progressFlag5" :percentage="loadProgress5"></el-progress>
          <el-button id="myBtn5" v-if="progressFlag5" size="mini">{{buttonText5}}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open2=false">确 定</el-button>
        <el-button @click="open2=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  </el-main>
</template>

<script>
import {
  premisesListInfo,
  getInfo,
  delInfo,
  addInfo,
  businessCircle,
  updateInfo,
  getRegionList,
  getPremisesProperty,
  subwayListById
} from "@/api/system/info";
import { getUpToken } from "@/api/file/upload";
import * as qiniu from 'qiniu-js';
import { v4 as uuidv4 } from 'uuid';

export default {
  name: "Info",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 楼盘信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示添加图片弹出层
      open2: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        outsideId: null,
        name: null,
        province: null,
        city: null,
        county: null,
        commercialArea: null,
        subway: null,
        address: null,
        proportion: null,
        grossPlotRatio: null,
        greenCoverage: null,
        buildingCount: null,
        efficiency: null,
        developer: null,
        estate: null,
        introduce: null,
        communityType: null,
        buildingType: null,
        premisesType: null,
        longItude: null,
        latItude: null
      },
      // 表单参数
      form: {
        //三级联动
        province:null,
        city:null,
        county:null,
        //图片
        pic1:'',
        pic2:'',
        pic3:'',
        pic4:'',
        pic5:'',
      },
      //配套
      peripheralFacilities:[],
      //交通
      trafficCondition:[],
      // 表单校验
      rules: {
      },
    //  物业类型
      premisesTypes:[],
    //  社区类型
      communityTypes:[],
    //  建筑类型
      buildingTypes:[],
    //省
      region1:[],
    //  市
      region2:[],
    //  区
      region3:[],
    //  楼盘特色
      properties:[],
    //  选中楼盘特色id
      propertyIds:[],
    //  商圈
      businessCircles:[],
      businessCircleIds:[],
    //  地铁
      subways:[],
      subwayIds:[],
    //图片
      loadProgress: 0, // 动态显示进度条
      loadProgress2: 0, // 动态显示进度条
      loadProgress3: 0, // 动态显示进度条
      loadProgress4: 0, // 动态显示进度条
      loadProgress5: 0, // 动态显示进度条
      progressFlag: false, // 关闭进度条
      progressFlag2: false, // 关闭进度条
      progressFlag3: false, // 关闭进度条
      progressFlag4: false, // 关闭进度条
      progressFlag5: false, // 关闭进度条
      buttonText: "暂停上传",
      buttonText2: "暂停上传",
      buttonText3: "暂停上传",
      buttonText4: "暂停上传",
      buttonText5: "暂停上传",
      upToken:null,
      images:null,
    };
  },
  created() {
    this.getList();
    this.initRegion(1);
    this.getPremisesProperties();
    this.getDicts("house_premises_type").then(response => {
      this.premisesTypes = response.data;
    });
    this.getDicts("house_community_type").then(response => {
      this.communityTypes = response.data;
    });
    this.getDicts("house_building_type").then(response => {
      this.buildingTypes = response.data;
    });
  //  图片
    this.getUp();
  },
  methods: {
    //    添加配套行
    addZhouBian(){
      this.peripheralFacilities.push({
        title:'',
        content:''
      })
    },
    delZhouBian(index){
      this.peripheralFacilities.splice(index,1)
    },
    //    添加配套行
    addJiaoTong(){
      this.trafficCondition.push({
        title:'',
        content:''
      })
    },
    delJiaoTong(index){
      this.trafficCondition.splice(index,1)
    },
    /** 查询楼盘信息列表 */
    getList() {
      this.loading = true;
      premisesListInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        console.log("infoList",this.infoList);
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        outsideId: null,
        name: null,
        province: null,
        city: null,
        county: null,
        commercialArea: null,
        address: null,
        proportion: null,
        grossPlotRatio: null,
        greenCoverage: null,
        buildingCount: null,
        efficiency: null,
        developer: null,
        estate: null,
        introduce: null,
        communityType: null,
        buildingType: null,
        premisesType: null,
        updateTime: null,
        longItude: null,
        latItude: null,
        pic1:null,
        pic2:null,
        pic3:null,
        pic4:null,
        pic5:null,
      };
        this.subways=[],
        this.subwayIds=[],
        this.businessCircles=[],
        this.businessCircleIds=[],
        this.propertyIds=[],
          this.peripheralFacilities=[],
          this.trafficCondition=[],
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加楼盘信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      console.log("id",id);
      getInfo(id).then(response => {
        this.form = response.data.byId;
        this.businessCircleIds=response.data.bcIds;
        this.subwayIds=response.data.subIds;
        this.propertyIds=response.data.ts;
        this.open = true;
        this.title = "修改楼盘信息";
        this.peripheralFacilities=response.data.peripheralFacilities;
        this.trafficCondition=response.data.trafficCondition;
        this.form.pic1=response.data.pic.pic1;
        this.form.pic2=response.data.pic.pic2;
        this.form.pic3=response.data.pic.pic3;
        this.form.pic4=response.data.pic.pic4;
        this.form.pic5=response.data.pic.pic5;
        console.log(response.data);

        this.initRegion(1);//地区初始化
        getRegionList(this.form.province).then(response => {//市
          console.log(response);
          this.region2=response.data;
          this.region3=[];
        });
        this.getSubways(this.form.province);
        getRegionList(this.form.city).then(response => {//区
          console.log(response);
          this.region3=response.data;
        });
        this.getSubways(this.form.city);
        this.getBusinessCircle();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.propertyIds=this.propertyIds;//特色
      this.form.commercialArea=this.businessCircleIds.toString();//数组转字符串，自动拼接逗号
      this.form.subway=this.subwayIds.toString();//地铁
      this.form.peripheralFacilities=this.peripheralFacilities;
      this.form.trafficCondition=this.trafficCondition;
      console.log("peripheralFacilities",this.form.peripheralFacilities);
      console.log("trafficCondition",this.form.trafficCondition);
      addInfo(this.form).then(response=>{
        if(response.code==200){
          this.$message.success("修改成功")
          location.reload();
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除楼盘信息编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delInfo(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/info/export', {
        ...this.queryParams
      }, `system_info.xlsx`)
    },
    // 地区联动初始化
    initRegion(parentId) {
      getRegionList(parentId).then(response => {
        console.log(response);
        this.region1=response.data;
      });
    },
// 地区联动 市
    getRegion2(parentId) {
      this.queryParams.city='';
      this.queryParams.county='';
      this.form.city='';
      this.form.county='';
      getRegionList(parentId).then(response => {
        console.log(response);
        this.region2=response.data;
        this.region3=[];
      });
      this.getSubways(parentId);
    },
    // 地区联动 区
    getRegion3(parentId) {
      this.queryParams.county='';
      this.form.county='';
      getRegionList(parentId).then(response => {
        console.log(response);
        this.region3=response.data;
      });
      this.getSubways(parentId);
    },
//    获取楼盘特色
    getPremisesProperties() {
      getPremisesProperty().then(response => {
        // console.log("premisesProperty",response);
        this.properties=response.data;
        console.log("properties",this.properties);
      });
    },
//    获取商圈
    getBusinessCircle(){
      businessCircle(this.form.county).then(response=>{
        if(response.data!=null){
          this.businessCircles=response.data;
        }
      });
      this.getSubways(this.form.county);
    },
    //    获取地铁
    getSubways(parentId){
      subwayListById(parentId).then(response=>{
        if(response.data.length>0){
          this.subways=response.data;
        }
      });
    },

//    图片上传
    //移除文件
    removeFile() {
      this.progressFlag = false;
      this.buttonText = "暂停上传";
      this.form.pic1='';
    },
    removeFile2() {
      this.progressFlag2 = false;
      this.buttonText2 = "暂停上传";
      this.form.pic2='';
    },
    removeFile3() {
      this.progressFlag3 = false;
      this.buttonText3 = "暂停上传";
      this.form.pic3='';
    },
    removeFile4() {
      this.progressFlag4 = false;
      this.buttonText4 = "暂停上传";
      this.form.pic4='';
    },
    removeFile5() {
      this.progressFlag5 = false;
      this.buttonText5 = "暂停上传";
      this.form.pic5='';
    },
    //上传之前
    handleBeforeUploadVideo(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag = true;
    },
    handleBeforeUploadVideo2(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag2 = true;
    },
    handleBeforeUploadVideo3(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag3 = true;
    },
    handleBeforeUploadVideo4(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag4 = true;
    },handleBeforeUploadVideo5(file) {
      //上传之前重新获取uptoken以免过期
      // console.log(file)
      this.progressFlag5 = true;
    },

    getUp(){
      getUpToken().then(res=>{
        this.upToken = res;
        console.log("后台获取token--",this.upToken);
      });
    },
    //1
    uploadWithSDK(token,putExtra,config,domain,file) {
      let that = this;
      console.log("token,",token);
      console.log("putExtra,",putExtra);
      console.log("config,",config);
      console.log("domain,",domain);
      console.log("file,",file);
      if (file) {
        let key = uuidv4()+file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function(err) {
          console.log(err);
        };

        let complete = function(res) {
          console.log('成功了');
          console.log("res",res.key);
          console.log("key",key);
          that.form.pic1=domain+key;
          // console.log("images",that.form.pic1);
        };

        let next = function(response) {
          console.log(response);
          that.loadProgress = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn").addEventListener("click", function(){
            console.log("1111111111111111111111111111111111111111")
            if(that.buttonText == "暂停上传"){
              that.buttonText = "继续上传";
              subscription.unsubscribe();
            }else if(that.buttonText == "继续上传"){
              that.buttonText = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })

      }

    },
    requestFile(param) {
      console.log("request,",param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = "http://rcdkvzv4v.hn-bkt.clouddn.com/";
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK(token,putExtra,config,domain,file);
    },
    //2
    uploadWithSDK2(token,putExtra,config,domain,file) {
      let that = this;
      console.log("token,",token);
      console.log("putExtra,",putExtra);
      console.log("config,",config);
      console.log("domain,",domain);
      console.log("file,",file);
      if (file) {
        let key = uuidv4()+file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function(err) {
          console.log(err);
        };

        let complete = function(res) {
          console.log('成功了');
          console.log("res",res.key);
          console.log("key",key);
          that.form.pic2=domain+key;
          // console.log("images",that.form.pic1);
        };

        let next = function(response) {
          console.log(response);
          that.loadProgress2 = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn2").addEventListener("click", function(){
            console.log("1111111111111111111111111111111111111111")
            if(that.buttonText2 == "暂停上传"){
              that.buttonText2 = "继续上传";
              subscription.unsubscribe();
            }else if(that.buttonText2 == "继续上传"){
              that.buttonText2 = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })
      }

    },
    requestFile2(param) {
      console.log("request,",param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = "http://rcdkvzv4v.hn-bkt.clouddn.com/";
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK2(token,putExtra,config,domain,file);
    },
    //3
    uploadWithSDK3(token,putExtra,config,domain,file) {
      let that = this;
      console.log("token,",token);
      console.log("putExtra,",putExtra);
      console.log("config,",config);
      console.log("domain,",domain);
      console.log("file,",file);
      if (file) {
        let key = uuidv4()+file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function(err) {
          console.log(err);
        };

        let complete = function(res) {
          console.log('成功了');
          console.log("res",res.key);
          console.log("key",key);
          that.form.pic3=domain+key;
          // console.log("images",that.form.pic1);
        };

        let next = function(response) {
          console.log(response);
          that.loadProgress3 = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn3").addEventListener("click", function(){
            console.log("1111111111111111111111111111111111111111")
            if(that.buttonText3 == "暂停上传"){
              that.buttonText3 = "继续上传";
              subscription.unsubscribe();
            }else if(that.buttonText3 == "继续上传"){
              that.buttonText3 = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })

      }
    },
    requestFile3(param) {
      console.log("request,",param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = "http://rcdkvzv4v.hn-bkt.clouddn.com/";
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK3(token,putExtra,config,domain,file);
    },
    //4
    uploadWithSDK4(token,putExtra,config,domain,file) {
      let that = this;
      console.log("token,",token);
      console.log("putExtra,",putExtra);
      console.log("config,",config);
      console.log("domain,",domain);
      console.log("file,",file);
      if (file) {
        let key = uuidv4()+file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function(err) {
          console.log(err);
        };

        let complete = function(res) {
          console.log('成功了');
          console.log("res",res.key);
          console.log("key",key);
          that.form.pic4=domain+key;
          // console.log("images",that.form.pic1);
        };

        let next = function(response) {
          console.log(response);
          that.loadProgress4 = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn4").addEventListener("click", function(){
            console.log("1111111111111111111111111111111111111111")
            if(that.buttonText4 == "暂停上传"){
              that.buttonText4 = "继续上传";
              subscription.unsubscribe();
            }else if(that.buttonText4 == "继续上传"){
              that.buttonText4 = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })

      }

    },
    requestFile4(param) {
      console.log("request,",param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = "http://rcdkvzv4v.hn-bkt.clouddn.com/";
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK4(token,putExtra,config,domain,file);
    },
    //5
    uploadWithSDK5(token,putExtra,config,domain,file) {
      let that = this;
      console.log("token,",token);
      console.log("putExtra,",putExtra);
      console.log("config,",config);
      console.log("domain,",domain);
      console.log("file,",file);
      if (file) {
        let key = uuidv4()+file.name;
        // putExtra.customVars["x:name"] = key.split(".")[0];
        // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
        let error = function(err) {
          console.log(err);
        };

        let complete = function(res) {
          console.log('成功了');
          console.log("res",res.key);
          console.log("key",key);
          that.form.pic5=domain+key;
          // console.log("images",that.form.pic1);
        };

        let next = function(response) {
          console.log(response);
          that.loadProgress5 = response.total.percent;
        };

        let subObject = {
          next: next,
          error: error,
          complete: complete
        };
        // 调用sdk上传接口获得相应的observable，控制上传和暂停
        let observable = qiniu.upload(file, key, token, putExtra, config);
        let subscription = observable.subscribe(subObject);

        //监听按钮事件，控制上传
        that.$nextTick(function () {
          document.getElementById("myBtn5").addEventListener("click", function(){
            console.log("1111111111111111111111111111111111111111")
            if(that.buttonText5 == "暂停上传"){
              that.buttonText5 = "继续上传";
              subscription.unsubscribe();
            }else if(that.buttonText5 == "继续上传"){
              that.buttonText5 = "暂停上传";
              subscription = observable.subscribe(subObject);
            }
          });
        })

      }

    },
    requestFile5(param) {
      console.log("request,",param)
      let file = param.file;
      //uptoken
      let token = this.upToken;
      //外链域名
      let domain = "http://rcdkvzv4v.hn-bkt.clouddn.com/";
      //可以配置分片大小等配置，具体查看官方文档
      let config = {
        useCdnDomain: false,//是否使用CDN加速域名
        disableStatisticsReport: false,//是否禁用日志报告
        retryCount: 6,//上传自动重试次数
        chunkSize: "4"// 每片大小
      };
      let putExtra = {
        customVars: {}
      };
      this.uploadWithSDK5(token,putExtra,config,domain,file);
    },
}
};
</script>
